<title>翻牌器</title>
<style>
body{
	background-color:#AAFFEE;
}
div{
	display:flex;
	margin-bottom:100px;
}
.slide{
	font-size:125px;
}
.slide img{
	width:92px;
	margin-right:2px;
}
.flop{
	font-size:90px;
}
.flop img{
	width:100px;
}
img{
	image-rendering:pixelated;
}
</style>
<script>
function $(id){
	return document.getElementById(id);
}
var clock = function(){
	function replaceImg(node,now){
		if(clock[node] != now){
			clock[node] = now;
			$(node).src = tpl+now+'.gif';
			setTimeout(function(){
				$(node).src = tpl+now+'.png';
			},500);
		}
	}
	
	var tpl = 'slide/';
	var blank = tpl+'blank.png';

	$('h1').src = blank;
	$('h2').src = blank;
	
	$('m1').src = blank;
	$('m2').src = blank;
	
	$('s1').src = blank;
	$('s2').src = blank;
	var clock = {h1:null,h2:null,m1:null,m2:null,s1:null,s2:null};
	
	var timer = setInterval(function(){
		
		const now = new Date();

		//const year = now.getFullYear();
		//const month = ('0' + (now.getMonth() + 1)).slice(-2);
		//const day = ('0' + now.getDate()).slice(-2);
		const hours = ('0' + now.getHours()).slice(-2);
		const minutes = ('0' + now.getMinutes()).slice(-2);
		const seconds = ('0' + now.getSeconds()).slice(-2);
		
		replaceImg('h1',hours.substring(0,1));
		replaceImg('h2',hours.substring(1));
		
		replaceImg('m1',minutes.substring(0,1));
		replaceImg('m2',minutes.substring(1));
		
		replaceImg('s1',seconds.substring(0,1));
		replaceImg('s2',seconds.substring(1));
	},1000);
}
var clock2  = function(){
	function replaceImg2(node,now){
		if(clock2[node] != now){
			clock2[node] = now;
			$(node).src = tpl2+now+'.gif';
			setTimeout(function(){
				$(node).src = tpl2+now+'.png';
			},500);
		}
	}
	var tpl2 = 'flop/';
	var blank2 = tpl2+'blank.png';
	
	$('h3').src = blank2;
	$('h4').src = blank2;
	
	$('m3').src = blank2;
	$('m4').src = blank2;
	
	$('s3').src = blank2;
	$('s4').src = blank2;
	var clock2 = {h3:null,h4:null,m3:null,m4:null,s3:null,s4:null};
	
	var timer = setInterval(function(){
		
		const now = new Date();

		//const year = now.getFullYear();
		//const month = ('0' + (now.getMonth() + 1)).slice(-2);
		//const day = ('0' + now.getDate()).slice(-2);
		const hours = ('0' + now.getHours()).slice(-2);
		const minutes = ('0' + now.getMinutes()).slice(-2);
		const seconds = ('0' + now.getSeconds()).slice(-2);
		
		replaceImg2('h3',hours.substring(0,1));
		replaceImg2('h4',hours.substring(1));
		
		replaceImg2('m3',minutes.substring(0,1));
		replaceImg2('m4',minutes.substring(1));
		
		replaceImg2('s3',seconds.substring(0,1));
		replaceImg2('s4',seconds.substring(1));
	},1000);
}
window.onload = function(){
	clock();
	clock2();
}
</script>
<div class="slide"><img id="h1"> <img id="h2"> : <img id="m1"> <img id="m2"> : <img id="s1"> <img id="s2"></div>
<div class="flop"><img id="h3"> <img id="h4"> : <img id="m3"> <img id="m4"> : <img id="s3"> <img id="s4"></div>